<template>
    <div style='width:100%;display:flex;gap: 2px;'>
        <el-select v-model="hour" :disabled="disabled" style="flex:1" placeholder="时" clearable @clear="clearTime">
            <el-option :key="h" v-for="h in hours" :label="h" :value="h" />
        </el-select>
        <!-- <el-select v-model="minut" :disabled="disabled" style="flex:1"  placeholder="分" clearable  @clear="clearTime">
            <el-option :key="m" v-for="m in minuts" :label="m" :value="m" />
        </el-select> -->
        <el-input type="number" style="flex:1"  readonly v-model="minut" :min="0" :max="59" @dblclick="showSelectMM"
            :disabled="disabled" clearable @clear="clearTime">
            <template #suffix>
                <el-icon @click="showSelectMM">
                    <ArrowDown />
                </el-icon>
            </template>
        </el-input>
        <my-dialog v-model="dlgVisible" title="选择分钟" width="400px">
            <el-space wrap>
                <el-button :type="item == minut ? 'primary' : ''" style="width: 19%;" v-for="item in minuts" :key="item"
                    @click="closeDlg(item)">{{ item }}</el-button>
            </el-space>
        </my-dialog>
    </div>
</template>

<script>

function makeArray(start, end, step) {
    let arr = [];
    for (let ix = start; ix <= end; ix += step) {
        arr.push(ix);
    }
    return arr;
}
export default {
    name: "MyTime2",
    props: {
        modelValue: [Date, String],
        disabled: Boolean,
        valueType: {
            //string | date, modelValue数据类型
            type: String,
            default: "string"
        },
        format: {
            type: String,
            default: "HH:II"
        },
        hourOptions: Array,
        minutOptions: Array,
    },
    emits: ["update:modelValue"],
    data() {
        return {
            hour: null,
            minut: null,
            dlgVisible:false,
        }
    },
    created() {
        this.setVal();
    },
    methods: {
        clearTime() {
            this.$emit("update:modelValue", null);
        },
        setVal() {
            if (this.modelValue) {
                if (typeof (this.modelValue) == "object") {
                    let d = mydate.parseDate(this.modelValue);
                    this.hour = d.getHours();
                    this.minut = d.getMinutes();
                } else if (typeof (this.modelValue) == "string") {
                    if (this.modelValue.length >= 16) {
                        let d = mydate.parseDate(this.modelValue);
                        this.hour = d.getHours();
                        this.minut = d.getMinutes();
                    } else if (this.modelValue.length >= 5) {
                        this.hour = parseInt(this.modelValue.substr(0, 2));
                        this.minut = parseInt(this.modelValue.substr(3, 2));
                    }
                }
            } else {
                this.hour = null;
                this.minut = null;
            }
        },
        editVal() {
            if (this.disabled) return;
            if (!this.hour && !this.minut) {
                this.$emit("update:modelValue", null);
                return;
            }
            let val = new Date(2000, 0, 1, this.hour, this.minut, 0);
            if (this.valueType == "string") {
                val = mydate.formatDate(val, this.format);
            }
            this.$emit("update:modelValue", val);
        },
        showSelectMM() {
            if (!this.disabled) {
                this.dlgVisible = true;
            }
        },

        closeDlg(item) {
            this.minut = item;
            this.dlgVisible = false;
        }
    },
    watch: {
        modelValue() {
            this.setVal();
        },
        hour() {
            this.editVal();
        },
        minut() {
            this.editVal();
        }
    },
    computed: {
        hours() {
            return this.hourOptions || makeArray(0,23,1);
        },
        minuts() {
            return this.minutOptions || makeArray(0,59,1);
        }
    }
}
</script>